<template>
  <!--<el-scrollbar height="100vh">-->
  <el-scrollbar height="1080px">
    <div class="PicturePoint" @click="addPoint" :style="mapUrl">
      <div class="info" v-if="false">
        {{formattedWeek}} --- {{x}} --- {{y}} --- {{sourceType}}
      </div>
      <div v-for="(point, index) in pointArr" :key="index" :style="getStyleStr(point)">
        <!--<CameraOnMap></CameraOnMap>-->
        <!--<WarnOnMap></WarnOnMap>-->
        <!--<EventOnMap></EventOnMap>-->
      </div>

      <div class="aaa" v-for="(point, index) in pointArr" :key="index" :style="getStyleStrPercent(point)"></div>

    </div>
  </el-scrollbar>
</template>

<script setup>
import { useMouse } from '@vueuse/core'
import {ElScrollbar} from "element-plus";
import { useNow, useDateFormat } from '@vueuse/core'
import {baseInfo} from '@/api/armyScreenApi.js'
import CameraOnMap from '@/views/armyScreen/warehouse/center/CameraOnMap.vue'
import WarnOnMap from '@/views/armyScreen/warehouse/center/WarnOnMap.vue'
import EventOnMap from '@/views/armyScreen/warehouse/center/EventOnMap.vue'

const { x, y, sourceType } = useMouse()
// const formattedWeek = useDateFormat(useNow(), 'YYYY-MM-DDTHH:mm:ss.000+08:00')

onMounted(() => {
  baseInfoService()
})

const mapUrl = ref('')
function baseInfoService () {
  baseInfo().then(res => {
    console.log(res)
    mapUrl.value = `--bgUrl: url(${res.data.mapUrl})`
  })
}

const pointArr = ref([])
function addPoint (event) {
  // console.log(event)
  const {offsetX, offsetY} = event
  console.log('offsetX, offsetY', offsetX, offsetY)
  const leftP = (offsetX/4056 * 100).toFixed(2)
  const topP = (offsetY/3040 * 100).toFixed(2)
  console.log('offsetX-p, offsetY-p', leftP+'%', topP+'%')
  pointArr.value.push([offsetX, offsetY,leftP,topP])
}

function getStyleStr (point) {
  const str = `position:absolute; left:${point[0]}px;top:${point[1]}px;border: 1px solid red;display: inline-block;`
  // console.log(str)
  return str
}

function getStyleStrPercent (point) {
  const str = `position:absolute; left:${point[2]}%;top:${point[3]}%;border: 1px solid red;display: inline-block;`
  // console.log(str)
  return str
}
</script>

<style lang="scss" scoped>
.PicturePoint {
  --bgUrl: url('@/assets/images/armyScreen/切图-bg@1x.png');
  position: relative;
  width: 4056px;
  height: 3040px;
  min-height: 1080px;
  background-image: var(--bgUrl);
  //background-image: url('/public/images/changsha_bg.png');
  background-size: cover;
  .info{
    position: absolute;
    right: 0;
    top: 0;
    color: #0DFDF0;
  }
  .aaa{
    width: 83px;
    height: 38px;
    min-height: 38px;
    background-image: url('@/assets/images/armyScreen/wearhouse-normal.png');
    background-size: cover;

    position: absolute;
    //left: 671px;
    //top: 460px;
    border: 1px solid red;
    display: inline-block;
    transform: translateY(-50%) translateX(-17px);
  }
}
</style>
